<template>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="0"><i :class="timeIcon"></i> </el-menu-item>
      <el-menu-item index="1" @click="jumpTo('Home')">
        <div class="link">首页</div>
      </el-menu-item>
      <el-menu-item index="2" @click="jumpTo('ArticleCreate')">
        <div class="link">发表文章</div>
      </el-menu-item>
      <el-menu-item index="3" @click="jumpTo('QuestionList')">
        <div class="link">题目列表</div>
      </el-menu-item>
      <el-menu-item index="4" @click="jumpTo('AnswerList')">
        <div class="link">查看提交</div>
      </el-menu-item>
      <el-menu-item v-if="!username" index="5" class="navright"  @click="jumpTo('Login')">
        <div class="link">登录</div>
      </el-menu-item>
      <el-menu-item v-if="!username"  index="6" class="navright" @click="jumpTo('Register')">
        <div class="link">注册</div>
      </el-menu-item>
      <el-menu-item v-if="username" index="7" class="navright" @click="jumpTo('UserView')">
        <div class="link">{{username}}</div>
      </el-menu-item>
      <el-menu-item v-if="username" index="8" class="navright" @click="jumpTo('Logout')">
        <div class="link" @click="logout">登出</div>
      </el-menu-item>
    </el-menu>

</template>

<script>

export default {
  name: "BlogHeader",
  props: {
    activeIndex: '',
  },

  data() {
    return({
      username: '',
      timeIcon: 'el-icon-moon',
    })
  },

  mounted() {
    this.username = localStorage.getItem('username');
    console.log(localStorage.getItem('username'))

    const curDate = new Date();
    const hours = curDate.getHours();
    if(hours <= 5 || hours >= 19)
      this.timeIcon = 'el-icon-moon';
    else if(hours > 5 && hours <= 8)
      this.timeIcon = 'el-icon-sunrise-1';
    else if(hours > 8 && hours <= 16)
      this.timeIcon = 'el-icon-sunny';
    else
      this.timeIcon = 'el-icon-sunset';
  },



  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      localStorage.clear();
      location.reload()
      console.log("out")
    },
    jumpTo(rut) {
      if(rut === 'UserView') {
        this.$router.push({name: rut, params: {username: this.username}})
        location.reload()
      } else if(rut === 'AnswerList') {
        this.$router.push({name: rut, params: {username: this.username}})
        location.reload()
      }
      else
        this.$router.push({name: rut})
    }
  },

}
</script>


<style scoped>

  .link{
    text-decoration: none;
  }

  .el-menu >>> .navright {
    float: right;
  }

</style>

